var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
var total = [];

function randomLetters() {
	var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	return str[parseInt(Math.random() * 26)];
}

function randomColor() {
	var r = parseInt(Math.random() * 256);
	var g = parseInt(Math.random() * 256);
	var b = parseInt(Math.random() * 256);

	return 'rgb(' + r + ',' + g + ',' + b + ')';
}

var generate = setInterval(function() {
	var div = document.createElement('div');
	div.className = 'box';
	div.style.left = parseFloat(Math.random() * (winWidth - 29)) + 'px';
	div.innerText = randomLetters();
	div.style.color = randomColor();
	div.style.borderColor = randomColor();
	document.body.appendChild(div);
	total.push(div);
}, 1000)

var decline = setInterval(function() {
	total.forEach(function(value, index) {
		value.style.top = parseInt(getComputedStyle(value, null).top) + 1 + 'px';
		if (parseInt(value.style.top) >= winHeight) {
			// document.body.removeChild(value);
			// total.splice(index,1);
			clearInterval(generate);
			clearInterval(decline);
			alert('你个废物！！');
		}
	})
}, 10)

window.onkeyup = function(e) {
	var key = e.key.toUpperCase();
	for (var i = 0; i < total.length; i++) {
		if (total[i].innerText == key) {
			document.body.removeChild(total[i]);
			total.splice(i, 1);
			break;
		}
	}
}
